<template>
  <div class="container">
    <ArticlePart
      :articles="articles"
      :screenWidth="screenWidth"
      @getArticle="getArticle"
    ></ArticlePart>
    <RightNav :info="info" :screenWidth="screenWidth"></RightNav>
  </div>
</template>

<script>
import ArticlePart from "./ArticlePart.vue";
import RightNav from "./RightNav.vue";
export default {
  name: "container",
  components: {
    ArticlePart,
    RightNav,
  },
  data() {
    return {
      screenWidth: null,
      articles: [],
      info: {
        username: "LITTLE FOX",
        title: "漫漫长夜，直等到你",
        article_num: 0,
        read_num: 0,
      },
    };
  },
  methods: {
    getArticle(option) {
      const api = `/api/article/getPart/${option.currentPage}/${option.pageSize}`;
      this.$axios.get(api).then((res) => {
        // console.log(res);
        window.scroll(0, 0);
        this.info.article_num = res.data.articleNum;
        option.total = res.data.articleNum;
        //进行时间格式处理
        this.articles = res.data.doc.map((item) => {
          let time = item.create_time;
          item.create_time = this.$dayjs(time).format("YYYY-MM-DD HH:mm:ss");
          return item;
        });
        console.log(this.articles);
      });
    },
  },
  created() {
    this.screenWidth = document.body.clientWidth;
    window.onresize = () => {
      //屏幕尺寸变化就重新赋值
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
};
</script>

<style scoped lang="scss">

.container {
  width: 90%;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  transition: all 0.5s ease-in-out;
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  padding:0;
}
@media screen and (max-width:650px) {
  .container {
    width:100%;
  }
}
// 最小宽度设置为1100
@media screen and (min-width: 650px) and (max-width: 1100px) {
  .container {
    width: 100% ;
  }
}
</style>